import React from "react";
import { useLoader } from "@react-three/fiber";
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";
import { Canvas, extend, useThree } from "@react-three/fiber";
import { useRef } from "react";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
extend({ OrbitControls });
import AiHome from "../components/AiHome/AiHome";

const Orbit = () => {
  const { camera, gl } = useThree();
  // eslint-disable-next-line react/no-unknown-property
  return <orbitControls args={[camera, gl.domElement]} />;
};
function Dren() {
  // const mySelfRef = useRef();

  // // 导入人物文件
  // const model = useLoader(
  //   GLTFLoader,
  //   "https://models.readyplayer.me/67dd3c192a23f1c8f9d4b027.glb"
  // );



  return (
    <>
      <div style={{ height: "100%", width: "50%" }}>
        <AiHome></AiHome>
        {/* <Canvas
          // style={{ backgroundColor: "black" }}
          camera={{ position: [1, 1, 2] }}
        >
          <Orbit />
          <mesh ref={mySelfRef}>
            <hemisphereLight intensity={1.5} groundColor="black" />
            <ambientLight />
            <primitive object={model.scene} scale={0.7} position={[0, -1, 0]} />
          </mesh>
        </Canvas> */}
      </div>
    </>
  );
}

export default Dren;
